<template>
  <div style="margin-top: 20px">
    <el-row style="margin-left: 20px">
      <el-col :span="24">
        <div class="block">
          <el-col :span="9" class="TimeZone">
            <el-row style="display: flex; align-items: center">
              <el-col :span="11" class="Time">
                <el-date-picker
                  type="date"
                  placeholder="选择开始日期"
                  v-model="inquirForm.startTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="0.5">-</el-col>
              <el-col :span="11" class="Time">
                <el-date-picker
                  type="date"
                  placeholder="选择结束日期"
                  v-model="inquirForm.endTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
            </el-row>
          </el-col>
          <el-button
            type="primary"
            @click="InquireTime"
            class="Inquire"
            >查询</el-button
          >
          <el-button
            type="primary"
            @click="ExportList"
            class="Export"
            >导出</el-button
          >
        </div>
      </el-col>
    </el-row>

    <el-table
      border
      style="width: 100%; margin-top: 20px; text-align: center"
      :data="tableData.slice((current - 1) * size, current * size)"
      ref="multipleTable"
      :default-sort="{ prop: 'avgArrivalRate', order: 'descending' }"
      :row-class-name="tableRowClassName"
    >
      <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
      <!-- prop="date" -->
      <el-table-column label="学院" prop="college"> </el-table-column>
      
       <el-table-column label="班级" prop="classes"> </el-table-column>
      <el-table-column label="辅导员" prop="counsellor"> </el-table-column>
      <el-table-column label="出勤率" sortable prop="avgArrivalRate">
        <template slot-scope="scope">
          {{ Number(scope.row.avgArrivalRate).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column label="带食物率" sortable prop="avgFoodBringRate">
        <template slot-scope="scope">
          {{ Number(scope.row.avgFoodBringRate).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column label="统计条数" prop="count"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="
              $router.push(
                '/home/analyzedetails?classes=' +
                  scope.row.classes +
                  '&startTime=' +
                  inquirForm.startTime +
                  '&endTime=' +
                  inquirForm.endTime
              )
            "
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 100]"
      :current-page.sync="current"
      :page-size="5"
      layout="sizes, prev, pager, slot"
      :total="tableData.length"
      row-key
      v-show="tableData != 0"
    >
            <el-button type="text" @click="showMore">下一页</el-button>    
    </el-pagination>
  </div>
</template>

<script>
import Cookies from "js-cookie";
export default {
  name: "patrolsinspection",
  data() {
    return {
      selectTime: "",
      tableData: [],
      size: 10,
      current: 1,
      header: Cookies.get("token"),
      fileList: [],
      inquirForm: {
        startTime: new Date(),
        endTime: new Date()
      },
    };
  },
  created() {
    this.setDefaultDateRange();
   this.InquireTime();
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row.avgArrivalRate<95) {
        return "warning-row";
      }
      return "";
    },
    ChangeDate() {
      console.log(this.selectTime[0]);
    },
    setDefaultDateRange() {
      const today = new Date();
      const startOfDay = new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate()
      );
      const endOfDay = new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate() + 1
      );
      endOfDay.setHours(0, 0, 0, -1); // 设置为前一天的23:59:59

      this.selectTime = [startOfDay, endOfDay]; // 设置为今天的日期范围
    },
    InquireTime() {
      let starttime;
      let endtime;
      if (this.inquirForm.startTime != null) {
        starttime = this.inquirForm.startTime.toLocaleDateString();
      }
      if (this.inquirForm.endTime != null) {
        endtime = this.inquirForm.endTime.toLocaleDateString();
      }
      let obj = {
      startTime: starttime,
      endTime:endtime,
    };

    this.$get("/api/schedule/dataStatistics", obj).then((res) => {
      this.tableData = res.data;
    });
    },
    // 导出成 excel
    ExportList() {
      // let start = this.formatDate(this.selectTime[0].toString());
      // let end = this.formatDate(this.selectTime[1].toString());
      // let obj = {
      //   startTime: start,
      //   endTime: end
      // };
      if(this.tableData.length != 0){
        this.$downs("/api/schedule/export", this.tableData);
      }else{
        this.$message({
          message: "暂未查询到数据",
          type: "warning",
        });
      }
    },
    // 分页
    handleSizeChange(val) {
      this.size = val;
    },
    handleCurrentChange(val) {
      this.current = val;
    },
    showMore() {
      if (this.current < this.tableData.length / this.size) {
        this.current++;
      } else {
        this.$message({
          message: "已经是最后一页",
          type: "warning",
        });
      }
    },
    // 导入
    handleChange(file, fileList) {
      let reg = /.*(xls|xlsx)$/;
      if (!reg.test(file.name)) {
        this.$message.error("请上传xls或xlsx格式的文件");
        return false;
      } else {
        this.$refs.upload.uploadFiles = [];
        this.$refs.upload.uploadFiles.push(file);
      }
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    uploadSuccess(response, file, fileList) {
      // console.log(response);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
  },
};
</script>

<style scoped>
.el-table >>> .cell {
  text-align: center;
}
/deep/ .el-table .warning-row {
  background: rgba(246, 182, 182, 0.734);
  /* background-color: rgba(197, 168, 247, 0.638);
  color: rgb(255, 255, 255) */
}

.el-button--small,
.el-button--small.is-round {
  width: 70px;
  height: 37px;
}
.el-upload-list {
  position: relative;
}
.el-upload-list >>> .el-upload-list--text {
  position: absolute;
  top: 0;
}
.Inquire{
  width: 70px; height: 37px; float: left; margin-left: 30px
}
.Export{
  width: 70px; height: 37px; float: right
}
@media (max-width: 728px){
  .TimeZone {
    width: 100%;
    margin-bottom: 10px;
  }
  .Time {
    width: 100%;
  }
  .Inquire{
    margin: 0;
  }
  .Export{
    float: left;
  }
}
</style>